<template>
  <div class="deviceDetailContainer">
    <scroll-view  style="height:100%" :scroll-y="true">  
    <div class='device-card'>
        <div class='card-title'>
            <img src='/static/images/user_icon_mywo@3x.png'/>
            设备详情
        </div>
        <div class='card-item'><div class='title'>设备名称：</div><div class='value'>{{device.deviceDesc}}</div></div>
        <div class='card-item'><div class='title'>设备位置：</div><div class='value'>{{device.devicePos}}</div></div>
        <div class='card-item'><div class='title'>设备型号：</div><div class='value'>{{device.deviceModel}}</div></div>
        <div class='card-item'><div class='title'>设备编号：</div><div class='value'>{{device.deviceNum}}</div></div>
        <div class='card-item'><div class='title'>设备品牌：</div><div class='value'>{{device.deviceBrand || '-'}}</div></div>
        <div class='card-item' v-if='type==1'><div class='title'>启用日期：</div><div class='value'>{{time}}</div></div>
        <div class='card-item' v-if='type==1'><div class='title'>设计寿命：</div><div class='value'>{{device.useLife==0?'-':device.useLife+'年'}}</div></div>
        <div class='card-item device-img' v-if='urls.length>0&&type==1'>
            <div class='title'>设备图片：</div>
            <img class='img' v-for='(img,index) in urls' :key='index' @click='previewImg(index)' :src="img"/>
        </div>
        <div class='card-title' v-if='type==2'>
            <img src='/static/images/home_icon_constantly.png'/>
            实时工况
        </div>
        <div class='card-item' v-if='type==2'><div class='title'>变量名：</div><div>实时值</div></div>
        <div  v-if='type==2 && realDataList.length>0'>
            <div class='card-item' v-for='(item,index) in realDataList' :key='index'>
                <div class='title'>{{item.tagName}}：</div>
                <div class='value' v-if='item.value'>{{item.value}}</div>
                <div class='value' v-else>{{item.tagValue}}{{item.unit}}</div>
            </div>
        </div>
    </div>
    <div class='info-wrap' v-if='type==1'>
        <div class='navbar'><mp-navbar :tabs="tabs" :activeIndex='activeIndex' @tabClick="tabClick"></mp-navbar></div>
        <div class='info-card-wrap' v-if='dataList.length>0'>
            <scroll-view  style="height:100%" :scroll-y="true" @scrolltolower="scrolltolower">
                <DeviceCard v-for='(item,index) in dataList' :key='index' :item='item' cardType='0' @selectDevice='toDetail'/>
            </scroll-view>
        </div>
    </div>
    </scroll-view>
  </div>
</template>

<script type="text/javascript">
import moment from 'moment';
import mpNavbar from 'mpvue-weui/src/navbar';
import DeviceCard from '@/components/device_card/device_card.vue';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      tabs:['故障工单','巡检工单','维保工单'],
      activeIndex:0,
      accountId:null,
      device:{},
      startId:0,
      dataList:[],
      realDataList:[],
      type:1,//1设备2实时工况
    }
  },
  onLoad(){
    Object.assign(this.$data, this.$options.data())
  },
  beforeMount() {
      var query = this.$root.$mp.query;
      if(query.accountId) this.accountId = query.accountId;
      this.type = query.type;
      if(query.type==1){
        wx.setNavigationBarTitle({
            title: '设备' 
        })
        }else if(query.type==2){
        wx.setNavigationBarTitle({
            title: '实时工况' 
        })
        }
      this.activeIndex = 0;
      this.startId = 0;
      this.findDevice()
      if(this.type==1) this.findOrder()
  },
  components: {
    mpNavbar,
    DeviceCard
  },
  methods:{
      tabClick(index){
        this.activeIndex = index;
        this.dataList = [];
        this.findOrder()
      },
      findSystem(){
        this.$http.post({
          url:'/project/getDeviceTypes',
          data:{
              ukey:this.userInfo.ukey,
              userId:this.userInfo.userId,
              buildingId:this.buildingId,
          }
        }).then((res)=>{
            if(res.s==0){
                this.list = this.systemList = [{name:'全部',id:''}].concat(res.i.Data);
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
      },
      findDevice(){
          this.$http.post({
              url:'/project/getDevice',
              data:{
                  ukey:this.userInfo.ukey,
                  userId:this.userInfo.userId,
                  accountId:this.accountId
              }
          }).then((res)=>{
                if(res.s==0){
                    this.device = res.i.Data;
                    this.findrealData();
                }
          }).catch((e)=>{
                console.log('请求失败',e)
          })
      },
      findrealData(){
          this.$http.post({
              url:'/alarm/getRealtimeData',
              data:{
                  ukey:this.userInfo.ukey,
                  projectId:this.device.projectId,
                  deviceId:this.accountId
              }
          }).then((res)=>{
                if(res.s==0){
                    this.realDataList = res.i.Data;
                    this.realDataList.map(item=>{
                        item.values.map(val=>{
                            if(val.thresholdValue==item.tagValue){
                                item.value = val.thresholdName;
                            }
                        })
                    })
                }
          }).catch((e)=>{
                console.log('请求失败',e)
          })
      },
      findOrder(){
          var url='';
          if(this.activeIndex==0){
              url = '/order/getFaultOrdersByDevice'
          }else if(this.activeIndex==1){
              url = '/order/getInspectOrdersByDevice'
          }else if(this.activeIndex==2){
              url = '/order/getMaintenanceOrdersByDevice'
          }
          this.$http.post({
              url,
              data:{
                  ukey:this.userInfo.ukey,
                  userId:this.userInfo.userId,
                  deviceId:this.accountId,
                  startId:this.startId
              }
          }).then((res)=>{
                if(res.s==0){
                    this.dataList = this.dataList.concat(res.i.Data);
                }
          }).catch((e)=>{
                console.log('请求失败',e)
          })
      },
      previewImg(index){
        var that = this;
        wx.previewImage({
            current:that.urls[index],
            urls:that.urls
        });
      },
      scrolltolower(){
          var minIdObj = this.dataList.reduce((prev,cur)=>{
             return prev.orderId<cur.orderId ? prev : cur;
          })
          this.startId = minIdObj.orderId;
          this.findOrder() 
      },
      toDetail(orderId,orderType){
          wx.navigateTo({
            url:`/pages/order_detail/main?orderId=${orderId}&orderType=${orderType}&activeIndex=${this.activeIndex}`
          }) 
      }
  },
  computed:{
    ...mapState(['userInfo']),
    time:function(){
        if(this.device.useDate){
            return moment(new Date(this.device.useDate)).format('YYYY/MM/DD')
        }else{
            return '-'
        }
    },
    urls:function(){
        if(this.device.deviceImages && this.device.deviceImages.length>0){
            return this.device.deviceImages.map(item=>'https://www.mopai8.com/repository/'+item.url);
        }else{
            return [];
        }
    }
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.weui-navbar{
    z-index:1;
}
.weui-navbar-slider-on{
    width: 100%!important;
    background-color: #1d7ebf!important;
}
.weui-navbar__item{
    padding: 16rpx 0!important;
    color:#7b7b7b;
    &.weui-bar__item_on{
    color: #1d7ebf!important;
    }
}
.weui-tab{
    border-bottom:none!important;
    background: #fff!important;
}
.deviceDetailContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    .device-card{
        margin: 30rpx;
        margin-bottom:20rpx; 
        border:1px solid #e6e6e6;
        border-radius: 8rpx;
        background: #fff;
        color:#999999;
        .card-title{
            height: 80rpx;
            line-height: 80rpx;
            margin: 0 20rpx;
            border-bottom:1px solid #e6e6e6;
            img{
                width: 40rpx;
                height: 40rpx;
                margin-top:-10rpx;
                vertical-align: middle; 
            }
        }
        .card-item{
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom:1px solid #e6e6e6;
            margin: 0 20rpx;
            font-size:30rpx;
            &:last-child{
                border-bottom: none;
            }
            .title{
                color: #a4a4a4;
            }
            .value{
                color:#308fc9;
            }
            &.device-img{
                height:140rpx;
                align-items: center;
                justify-content: flex-start;
                img{
                    width: 120rpx;
                    height:120rpx;
                    margin-right:20rpx; 
                    border-radius: 8rpx;
                }
            } 
        }
    }
    .info-wrap{
        height: 100vh;
        display: flex;
        flex-direction: column;
        .info-card-wrap{
            height: 50rpx;
            flex:1;
        }
    }
}
</style>
